<template>
  <div>
    <view class="content">
     <image class='background' src="../../static/images/back.jpg" mode="aspectFill"></image>
    </view>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/grade.png" mode="aspectFill"></image></div>
</div>
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/subject.png" mode="aspectFill"></image></div>
</div>
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/number.png" mode="aspectFill"></image></div>
</div>
</div>
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder">{{grade}}</div>
      </div>
      <div class="weui-flex__item">
        <div class="placeholder">{{subject}}</div>
      </div>
      <div class="weui-flex__item">
        <div class="placeholder">{{count}}</div>
      </div>
    </div>
    <button v-for="item in functionList" :key= "item" class="function_button" hover-class="function_button_hover" @click="goFunctionSelect(item)">
      {{item}}
    </button>
  </div>
</template>

<script>

export default {
  data () {
    return {
      grade: 0,
      subject: '',
      count: 0,
      functionList: ['复习错题', '错题测试', '错题推荐']
    }
  },
  methods: {
    goFunctionSelect (item) {
      if (item === '复习错题') {
        const url = ('../review/main?grade=' + this.grade + '&subject=' + this.subject)
        wx.navigateTo({url})
      } else if (item === '错题测试') {
        const url = ('../test/main?grade=' + this.grade + '&subject=' + this.subject)
        wx.navigateTo({url})
      } else if (item === '错题推荐') {
        const url = ('../recommendation/main?grade=' + this.grade + '&subject=' + this.subject)
        wx.navigateTo({url})
      }
    }
  },
  onLoad: function (option) {
    this.grade = option.grade
    this.subject = option.subject
    this.count = option.count
  }
}
</script>

<style scoped>
.function_button {
  width:80%;
  margin-top: 70rpx;
  margin-bottom: 60rpx;
  background-color: #FFB5C5;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.function_button_hover {
  opacity: 0.5;
}
.placeholder {
  margin: 5px;
  padding: 0 10px;
  height: 2.3em;
  line-height: 2.3em;
  text-align: center;
}
.placeholder2{
margin-left: 35px;
margin-right: 5px;
margin-top:15px;
margin-bottom: 5px;
padding: 0 10px;
height: 2.3em;
line-height: 1em;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
  z-index: -1;
}
.titleicons{
  position:absolute;
  width:10%;
  height: 6%;
}
</style>
